<template>
  <header>
    <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
      <div class="titles">
        <div>客户群</div>
        <el-input v-model="name" placeholder="群名搜索">
          <template #append>
            <el-button :icon="Search" @click="search" />
          </template>
        </el-input>
      </div>
      <el-button type="primary" plain style="margin-left: 10px" @click="synchronous"
        >同步客户群</el-button
      >
    </div>
  </header>
</template>
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
const name = ref('')
const emit = defineEmits(['searchList', 'handleSync'])
const search = () => {
  emit('searchList', name.value)
}
const synchronous = () => {
  emit('handleSync')
}
</script>
<style scoped lang="scss">
header {
  padding: 13px 12px;
  background-color: #007aff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .titles {
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    div {
      width: 60px;
      flex-flow: 0;
    }
    .el-input {
      width: 300px;
    }
  }
}
</style>
